import Vue from 'vue'
import App from './App'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets


import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// import './assets/style/element-variables.scss'
import '@/styles/index.scss' // global css
import '@/assets/icons/iconfont.css' // global css
import EMA from './assets/js/singleton-ema'
import Widget from '@/widgets/components/widget'
import AttrComponent from '@/widgets/components/attr'



import store from './store'
import router from './router'
import _ from 'lodash'

import '@/icons' // icon
import '@/permission' // permission control

import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp);






// console.log(XdhForm)
/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */

// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN
Vue.use(ElementUI)
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
Vue.prototype._ = _;
window.EMA = EMA
Vue.config.productionTip = false

window.Vue = Vue
Vue.use(ElementUI);
Vue.use(Widget);
Vue.use(AttrComponent)

import VueNativeSock from 'vue-native-websocket'

if(process.env.VUE_APP_SOCKET_API) {
  Vue.use(VueNativeSock, process.env.VUE_APP_SOCKET_API,
    {
      store: store,
      format: 'json',
      reconnection: true, // (Boolean) whether to reconnect automatically (false)
      reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),
      reconnectionDelay: 3000,
      passToStoreHandler: function (eventName, event) {
        if (!eventName.startsWith('SOCKET_')) { return }
        let method = 'commit'
        let target = eventName.toUpperCase()
        let msg = event
        if (this.format === 'json' && event.data) {
          msg = JSON.parse(event.data)
          if (msg.mutation) {
            target = [msg.namespace || '', msg.mutation].filter((e) => !!e).join('/')
          } else if (msg.action) {
            method = 'dispatch'
            target = [msg.namespace || '', msg.action].filter((e) => !!e).join('/')
          }
        }
        
         console.log(method,target);
         if(method !== 'dispatch' && target !== 'reg'){
           this.store[method]('socket/'+target, msg)
           if(target == 'SOCKET_ONOPEN' && this.store.getters.userInfo.token){
              this.store.dispatch('socket/reg',{
                token:this.store.getters.userInfo.token,
                type:'admin'
              });
           }
         }
      }
    })
}




Vue.prototype.globalClick = function (callback) {
  document.getElementsByTagName('body').onclick = function(){
    callback();
  };

};

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
// Vue.component("XdhFormItem", XdhFormItem);
